<template>
  <div>
    <div
      class="pieCharts"
      :style="{ height: height, width: width }"
      ref="pieCharts"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  title: {
    textAlign: "center",
    textVerticalAlign: "center",
    left: "50%",
    top: "45%",
    itemGap: 1,
    textStyle: {
      fontSize: 30,
      color: "#2498CC",
    },
    subtextStyle: {
      fontSize: 14,
      color: "#2498CC",
    },
  },
  series: [
    {
      type: "pie",
      silent: true,
      clockwise: true, //顺时针排布
      radius: [60, 90],
      center: ["50%", "50%"],
      label: {
        normal: {
          position: "center",
        },
      },
      data: [
        {
          value: null,
          itemStyle: {
            color: "#23BAE4",
          },
        },
        {
          value: null,
          label: {
            show: false,
          },
          itemStyle: {
            color: "#1F67B0",
          },
        },
      ],
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.pieCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      options.title.text = this.echartsData.value + "%";
      options.title.subtext = this.echartsData.name;
      options.series[0].data[0].value = this.echartsData.value;
      options.series[0].data[1].value = 100 - this.echartsData.value;

      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.pieCharts {
  // width: 100%;
  // height: 100%;
}
</style>
